<template>
  <div class="createuser">
    <a-form
      :model="formState"
      v-bind="layout"
      :rules="rules"
      @finish="onFinish"
    >
      <a-form-item name="name" label="实验室名字">
        <a-input v-model:value="formState.name" />
      </a-form-item>
      <a-form-item name="labTypeId" label="实验室类型">
        <a-select
          v-model:value="formState.labTypeId"
          :options="labTypeOptions"
        ></a-select>
      </a-form-item>
      <a-form-item name="experimenterId" label="实验室负责人">
        <a-select
          v-model:value="formState.experimenterId"
          :options="experimenterIdOptions"
        ></a-select>
      </a-form-item>
      <a-form-item name="deviceNum" label="deviceNum">
        <a-input-number v-model:value="formState.deviceNum" />
      </a-form-item>
      <a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 8 }">
        <div class="submitbtn">
          <a-button type="primary" html-type="submit">提交信息</a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { FormType } from "@/EnvEnum/form";
import { ILabTypeInfo, type ILabInfo } from "@/api/RequestIDL/labManage";
import { createLab, getLabById, updateLab } from "@/api/methods/labManageReq";
import { getAllLabMan, getAllLabType } from "@/api/methods/labTypeReq";
import router from "@/router/router";
import { Message } from "@/utils/message";
import { useRouteQuery } from "@vueuse/router";
import { onMounted, ref, watch } from "vue";
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 8 },
};
const rules = ref([]);
const formState = ref<Partial<ILabInfo>>({
  name: "",
  labTypeId: undefined,
  experimenterId: undefined,
  deviceNum: undefined,
});
const labTypeOptions = ref();
const experimenterIdOptions = ref();
const id = useRouteQuery<string, number>("id", undefined, {
  transform: Number,
});
const formType = useRouteQuery<string, number>("formType", undefined, {
  transform: Number,
});
const onFinish = async () => {
  if (formType.value === FormType.Create) {
    const res = await createLab(formState.value);
    if (res.code === 20000) {
      Message("success", "添加实验室成功", () => {
        router.go(-1);
      });
    }
  } else {
    const res = await updateLab({ id: id.value, ...formState.value });
    if (res.code === 20000) {
      Message("success", "实验室信息修改成功", () => {
        router.go(-1);
      });
    }
  }
};
watch(
  id,
  async () => {
    if (id.value) {
      const res = await getLabById({ id: id.value });
      formState.value = res.data;
    }
  },
  { immediate: true }
);
onMounted(async () => {
  // 获得所有实验室类型
  const res = await getAllLabType();
  labTypeOptions.value = res?.data.map((item: ILabTypeInfo) => {
    return {
      value: item.id,
      label: item.typeName,
    };
  });
  // 获得所有实验室人员
  const res2 = await getAllLabMan();
  experimenterIdOptions.value = res2.data.map((item) => {
    return {
      ...item,
      label: item.username,
      value: item.id,
    };
  });
});
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.maincontent {
}
</style>
